﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="DataGrid.aspx.cs" Inherits="WebUI.EasyUI.DataGrid" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
        <div>
            <a href="#" id="btnadd" iconCls="icon-add">新增</a>
            <a href="#" id="btndel" iconCls="icon-del">删除</a>
            <input id="ss" class="easyui-searchbox" prompt="请输入查询条件" />
        </div>
        <script type="text/javascript">
            $('#btnadd').linkbutton({
                id:'0',
                plain:true,
                text:'新增',
                iconCls:'icon-add'
            });
            $('#btndel').linkbutton({
                id:'1',
                plain:true,
                text:'删除',
                iconCls: 'icon-remove'
            });

            $('#ss').searchbox({
                searcher: function (value, name) {
                    alert(value);
                }
            });
        </script>
        <div>
            <table id="tb"></table>
        </div>
        <script type="text/javascript">
            var grid = $('#tb').datagrid({
                striped:true, //间隔色
                fitColumns:true,
                collapsible:true,
                title: 'DataGrid',
                url: 'DataGridHandler.ashx',
                toolbar:[{iconCls:'icon-add',text:'增加'},'-',{iconCls:'icon-save',text:'保存'}],
                pagination: true,
                rownumbers:true,//显示行数
                pageSize: 2,
                columns: [[{checkbox:true,title:'全选'},{ field: 'code', title: '编号', width: 100, sortable: true }, { field: 'name', title: '名称', width: 100, resizable: true }, { field: 'price', title: '价格', width: 100}]],
                onLoadError: function () { //当载入远程数据发生错误时触发
                    $.messager.alert('Error', '获取数据失败');
                },
                onLoadSuccess: function (data) {  //当数据载入成功时触发
                    // getMes(data);
                },
                onClickRow: function (rowIndex, rowData) { //点击行时触发
                    // getRow(rowIndex, rowData);
                },
                onDblClickRow: function (rowIndex, rowData) { //双击一行时触发
                    getDblRow(rowIndex, rowData);
                },
                onClickCell: function (rowIndex, field, value) { //单击单元格触发
                    getCell(rowIndex, field, value);
                },
                onDblClickCell: function (rowIndex, field, value) { //双击单元格时触发
                    getCell(rowIndex, field, value);
                },
                onSortColumn: function (sort, order) { //对排序列单击时触发
                    getSort(sort, order);
                },
                onResizeColumn: function (field, width) { //调整列宽时触发
                    $.messager.alert('', "field:" + field + ",width:" + width);
                },
                onSelect: function (rowIndex, rowData) {
                    getSelect(rowIndex,rowData);
                }
            });

            function getMes(data) {
                if(data)
                    $.messager.alert('','获取数据成功!');
            }

            function getRow(rowIndex,rowData) {
                $.messager.alert('', "单击行:"+rowIndex);
            }

            function getDblRow(rowIndex,rowData) {
                $.messager.alert('',"双击行:"+rowIndex+"----");
            }

            function getCell(rowIndex,field,value) {
                $.messager.alert('',"rowIndex:"+rowIndex+"--field:"+field+"--value:"+value);
            }

            function getSort(sort,order) {
                $.messager.alert('',sort);
            }

            function getSelect(rowIndex,rowData) {
                $.messager.alert('',rowIndex);
            }

            //设置分页控件
            var p = $('#tb').datagrid('getPager');
            $(p).pagination({
                pageSize:10,//每页记录数
                pageList:[5,10,15,20],
                
                
            });
        </script>
    </form>
</body>
</html>
